<!DOCTYPE html>
<html>
    <body>
        <title>skyline</title>
        <script src="/static/js/mousetrap.min.js"></script>
        <script src="/static/js/jquery.min.js"></script>
        <script src="/static/js/dygraph-combined.js"></script>
        <script src="/static/js/skyline.js"></script>

        <link rel="stylesheet" href="/static/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/font-awesome.min.css">
        <link rel="stylesheet" href="/static/css/skyline.css"> 

        <div id="navbar">
            <div class='container'>
                <a href='/' id="logo" class='brand' href='/'>
                    skyline 
                </a>
            </div>
        </div>

        <div class="container main_container">
            <div id="title_container">
                <span id="graph_title">Select a metric</span>
            </div>
            <div id="graph_container">
                <div class="duration">1 hour:</div>
                <div id="mini_label"></div>
                <div id="mini"></div>
                <div class="duration">24 hours:</div>
                <div id="big_label"></div>
                <div id="graph"></div>
            </div>
            <div id="metrics_main">
                <div id="legend">
                    <span id="legend_name">metric name</span>
                    <span id="legend_coefficient">anomalous datapoint</span>
                </div>
                <div id="metrics_listings"></div>
            </div>
        </div>
    </body>
</html>

